<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/cart.css" />
		<link rel="stylesheet" href="css/0704.css" />
		<link rel="stylesheet" href="css/shouye.css">
		<link rel="stylesheet" href="font/iconfont.css">
	</head>
	<body>
		<!-- 页眉 -->
		<header id="header">
			<div class="container">
				<!-- LOGO -->
				<div id="logo" class="float_l">
					<img src="img/logo.jpg" title="悦轩饼家" width="160" />
				</div>
				<!-- 定位 -->
				<div id="addr" class="float_l">
					<i class="iconfont icon-weizhi"></i> 武汉市 <a class="button" href="javascript:;">切换城市</a>
				</div>
				<!-- 导航 -->
				<nav id="nav" class="float_l">
					<ul>
						<li><a href="shouye.html">全部</a></li>
						<li><a href="dangao.html">蛋糕</a></li>
						<li><a href="#">下午茶</a></li>
						<li><a href="#">手信</a></li>
						<li><a href="dingdanxinxi.html">团购预约</a></li>
						<li><a href="guanyu.html">关于我们</a></li>
					</ul>
				</nav>
				<div id="func" class="float_r">
					<ul>
						<li><a><i class="iconfont icon-sousuo1"></i></a></li>
						<li><a href="gouwuche.html"><i class="iconfont icon-goumaijilu"></i></a></li>
						<li><a href="denglu.html"><i class="iconfont icon-yonghu1"></i></a></li>
						<li><a>联系我们</a></li>
					</ul>
				</div>
			</div>
		</header>
		<div class="container1">
			<!-- 订单列表 -->
			<div class="cart-panel">
				<div class="hd">
					<ul class="order-title">
						<li class="selecter"></li>
						<li class="product">商品名称</li>
						<li class="market-price">市场价</li>
						<li class="order-price">订购价(8折)</li>
						<li class="num">数量</li>
						<li class="operate">操作</li>
					</ul>
				</div>
				<div class="bd">
					<ul class="order-list">
						<li class="selecter">
							<i class="icon-select active"></i>
						</li>
						<li class="img-box">
							<a href="#" target="_blank">
								<img src="img/lx1.png">
							</a>
						</li>
						<li class="product">
							<a href="#" target="_blank">
								<span class="product-title" style="line-height:40px;">[悦轩饼家蛋糕]榴芒双拼(约2磅)一双拼蛋糕</span>
								<span class="feature"></span>
							</a>
						</li>
						<li class="market-price">
							<span class="price-sign">¥</span>
							<span class="price-num">298</span>
						</li>
						<li class="order-price">
							<span class="price-sign">¥</span>
							<span class="price-num">198</span>
						</li>
						<li class="num">
							<div class="number-box">
								<input type="button" class="sub-number" value="减">
								<input type="text" value="5" class="txt-num">
								<input type="button" class="add-number" value="加">
							</div>
						</li>
						<li class="operate">
							<a href="javascript:void(0)" class="delBtn">删除</a>
						</li>
					</ul>
					<ul class="order-list">
						<li class="selecter">
							<i class="icon-select active"></i>
						</li>
						<li class="img-box">
							<a href="#" target="_blank">
								<img src="img/lx2.png">
							</a>
						</li>
						<li class="product">
							<a href="#" target="_blank">
								<span class="product-title" style="line-height:40px;">[悦轩饼家蛋糕]芒果千层(900g)</span>
								<span class="feature"></span>
							</a>
						</li>
						<li class="market-price">
							<span class="price-sign">¥</span>
							<span class="price-num">289</span>
						</li>
						<li class="order-price">
							<span class="price-sign">¥</span>
							<span class="price-num">169</span>
						</li>
						<li class="num">
							<div class="number-box">
								<input type="button" class="sub-number" value="减">
								<input type="text" value="2" class="txt-num">
								<input type="button" class="add-number" value="加">
							</div>
						</li>
						<li class="operate">
							<a href="javascript:void(0)" class="delBtn">删除</a>
						</li>
					</ul>
					<ul class="order-list">
						<li class="selecter">
							<i class="icon-select"></i>
						</li>
						<li class="img-box">
							<a href="#" target="_blank">
								<img src="img/lx3.png">
							</a>
						</li>
						<li class="product">
							<a href="#" target="_blank">
								<span class="product-title" style="line-height:40px;">[悦轩饼家蛋糕]榴莲香雪(约2磅)一榴莲蛋糕</span>
								<span class="feature"></span>
							</a>
						</li>
						<li class="market-price">
							<span class="price-sign">¥</span>
							<span class="price-num">269</span>
						</li>
						<li class="order-price">
							<span class="price-sign">¥</span>
							<span class="price-num">149</span>
						</li>
						<li class="num">
							<div class="number-box">
								<input type="button" class="sub-number" value="减">
								<input type="text" value="1" class="txt-num">
								<input type="button" class="add-number" value="加">
							</div>
						</li>
						<li class="operate">
							<a href="javascript:void(0)" class="delBtn">删除</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- 订单列表 end-->
			<!-- 结算 -->
			<div class="set-bar">
				<div class="set-info">
					<div class="set-stat">
						应付金额:
						<div class="price">
							<span class="price-sign">¥</span>
							<span class="price-num" id="totalMoney"><!-- 565 --></span>
						</div>
					</div>
				</div>
				<button class="btn btn-primary btn-lg" type="button" id="jiesuan">去结算</button>
			</div>
			<!-- 结算 End -->
		</div>
		
		<script src="js/jquery.min.js"></script>
		<script>
			$(function() {
				// 选中状态切换
				$('.order-list').on('click', '.icon-select', function() {
					$(this).toggleClass('active');
					getTotalMoney();
				})
				
				//添加数量
				// $('.order-list .add-number').on('click',function(){
				// 	var num = parseInt($(this).parent().find('.txt-num').val());
				// 	num++;
				// 	$(this).parent().find('.txt-num').val(num);
					
				// 	$(this).parent().find('.sub-number').removeAttr('disabled');
				// });
				
				//减少数量
				// $('.order-list .sub-number').on('click',function(){
				// 	var num = parseInt($(this).parent().find('.txt-num').val());
				// 	num--;
				// 	if(num == 0){
				// 		$(this).attr('disabled','disabled');
				// 	}else{
				// 		$(this).removeAttr('disabled');
				// 	}
				// 	$(this).parent().find('.txt-num').val(num);
				// });
				
				//删除商品
				$('.order-list .delBtn').on('click', function(){
					$(this).closest('.order-list').remove();
					getTotalMoney();
				})
				
				//商品数量加减，价格自动计算
				$(".sub-number").click(function(){
					var pro_price = 0;
					var $val = parseInt($(this).next().val());
					if($val != 0){
						$(this).next().val($val - 1);
					}else{
						$(this).css("disabled","disabled");
					}
					getTotalMoney();
				})
				$(".add-number").click(function(){
					var $val = parseInt($(this).prev().val());
					$(this).prev().val($val + 1);
					getTotalMoney();
				})
				
				//价格计算
				function getTotalMoney(){
					var total = 0;
					$(".txt-num").each(function(){
						var price = $(this).parent().parent().prev().find(".price-num").text();
						total += parseInt($(this).val())*parseInt(price);
					});
					$("#totalMoney").text(total)
				}
				
				$(".price-num").text(function(){
					getTotalMoney();
				})
			})
		</script>
		<!-- 页脚 -->
		<div style="clear: both; background-color: #3e2d23;width: 100%;height: 150px;">
			<footer>
				<div>
					<ul id="u1" style="padding-left: 0px;">
						<li><a id="a1">品牌动态</a></li>
						<li><a>生产经营资质</a></li>
						<li><a>企业合作</a></li>
						<li><a>发票申请</a></li>
						<li><a>平台规则</a></li>
						<li><a>帮助服务</a></li>
						<li><a>联系我们</a></li>
					</ul>
					<ul id="u2">
						<li style="padding-left: 70px;"><img src="img/006.png" alt=""></li>
						<li style="padding-left: 0px;"><a href="tel:4009996665">400-999-6665</a></li>
						<li>WEIBO</li>
						<li>WECHAT</li>
						<li>京东商城</li>
					</ul>
				</div>
				<div>
					<ul id="u3">
						<li style="clear: both;">深圳市悦轩商城科技股份有限公司</li>
						<li>粤ICP备16039394号-6</li>
						<li>京公网安备44030702002399</li>
						<li>公司地址：深圳市龙岗区坂田街道布龙339鸿生源工业园A座5楼</li>
					</ul>
				</div>
			</footer>
		</div>
	</body>
</html>